<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <input type="text" id="inp1">
    <select name="" id="sel">
        <option value="1">+</option>
        <option value="2">-</option>
        <option value="3">*</option>
        <option value="4">/</option>
    </select>
    <input type="text" id="inp2">
    <input type="button" value="=" id="btn">
    <input type="text" id="inp3">


    <script>

        // 1 找对象

        var obj1 = document.getElementById('inp1') ;
        console.log(obj1) ;  // 测试对象是否拿到
        var obj2 = document.getElementById('inp2') ;
        console.log(obj2) ;  // 测试对象是否拿到
        var oBtn = document.getElementById('btn') ;
        console.log(oBtn) ;  // 测试对象是否拿到
        var oRes = document.getElementById('inp3') ;
        console.log(oRes) ;  // 测试对象是否拿到

        // 拿到符号的对象
        var oSel = document.getElementById('sel') ;


        // 事件
        oBtn.onclick = function() {
            var n1 = obj1.value ;
            var n2 = obj2.value ;
            // 判断输入是否正确

            // 1 判断是否有输入(2个)
            // if(n1 === '' || n2 === '') {
            //     alert('输入不能为空');
            // }

            // 判断不能为空
            if(n1 !== '' && n2 !== '') {
                // 输入的必须是数字
                if(!isNaN(n1) && !isNaN(n2)) {
                    // 根据符号进行计算
                    var f = oSel.value ;  // 字符串
                    switch(f) {
                        case '1' : {
                            // alert(666) ;
                            oRes.value = n1 * 1 + n2 * 1 ;
                            break ;
                        }
                        case '2' : {
                            oRes.value = n1 - n2 ;
                            break ;
                        }
                        case '3' : {
                            oRes.value = n1 * n2 ;
                            break ;
                        }
                        case '4' : {
                            oRes.value = n1 / n2 ;
                            break ;
                        }
                    }
                }
                else {
                    alert('请输入数字') ;
                }
            }
            else {
                alert('输入不能为空') ;
            }
        }


    </script>
    
</body>
</html>